<template>
  <div>
    <div>
      全选:
      <input type="checkbox" v-model="allData" />
    </div>

    <div v-if="myCat.list.length > 0">
      <div v-for="item in myCat.list">
        <input type="checkbox" v-model="seleteValue" :value="item.id" />

        {{ item.name }}
        <div>价格： {{ item.price }}</div>
        <button @click="remove(item.id)">移除</button>
        <div>
          <button @click="add(item.id)">加</button>
          {{ myCat.counts[item.id] }}
          <button @click="del(item.id)">减</button>
        </div>
      </div>

      <div v-if="seleteValue.length > 0" @click="piliang">删除</div>
    </div>
    <div v-else>购物车暂无数据</div>

    <div v-if="allPrice !== 0">总金额：{{ allPrice }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, computed, watch } from "vue";
import { useStore } from "vuex";

const store = useStore();

const seleteValue = ref([]);

const { myCat } = toRefs(store.state);

const remove = (id: String) => {
  store.commit("myCat/removeShop", [id]);
};

const add = (id: string) => {
  store.commit("myCat/setCount", { id, type: "add" });
};

const del = (id: string) => {
  store.commit("myCat/setCount", { id, type: "del" });
};

const piliang = () => {
  store.commit("myCat/removeShop", seleteValue.value);
};

const allPrice = computed(() => {
  console.log("myCat", store.state.myCat.list);

  // 用来存放总价的变量
  let price = 0;

  // 当前选中的商品，每一项存放的是商品id
  seleteValue.value.forEach((id) => {
    // 从购物车商品中，找到跟当前循环时id匹配的项
    let currentShop = store.state.myCat.list.find(
      (shopItem: any) => shopItem.id === id
    );
    if (!currentShop) return;
    // 找到当前商品的单价
    let _pri = currentShop.price;

    // 找到当前商品的数量
    let _count = store.state.myCat.counts[id];

    // 当前单个商品的总价
    let _allPri = _pri * _count;

    // 所有商品的价格等于  单个商品的总价 相加
    price += _allPri;
  });

  // 每循环一次是一件商品的总价，将每件商品的总价加起来就是全部总价
  // store.state.myCat.list.forEach((item: any) => {
  //   // 单个商品的加个
  //   let _pri = item.price;

  //   // 单个商品的数量
  //   let _count = store.state.myCat.counts[item.id];

  //   let _allPri = _pri * _count;

  //   price += _allPri;
  // });

  return price;
});

// 用来保存全选的状态
const allData = ref(false);
const seleceAll = () => {
  allData.value = !allData.value;

  // seleteValue 通过这个变量来控制商品的选中和不选中
  // 如果 allData.value 为ture，那么 seleteValue =[...所有id]
  // 如果为 false ， seleteValue = []

  let temp: any = [];

  if (allData.value) {
    // 通过遍历购物车列表，将所有 商品的 id 存放到 临时数组中
    store.state.myCat.list.forEach((shopItem: any) => {
      temp.push(shopItem.id);
    });
  }

  seleteValue.value = temp;
};

watch(allData, (newAllData) => {
  let temp: any = [];

  if (newAllData) {
    // 通过遍历购物车列表，将所有 商品的 id 存放到 临时数组中
    store.state.myCat.list.forEach((shopItem: any) => {
      temp.push(shopItem.id);
    });
  }

  seleteValue.value = temp;
});

// 当前选中的商品 newSelect， [id的数组]
watch(seleteValue, (newSelect) => {
  // every 如果有一个返回false 则，最终返回fasle， 只有全部通过才会返回true
  allData.value = store.state.myCat.list.every((shopItem: any) => {
    return newSelect.includes(shopItem.id);
  });
});
</script>

<style lang="less" scoped></style>
